<template>
  <div class="component back_content">
    <ul class="bc_menu" v-if="menus?.length">
      <li :class="['bcm_item', selectIndex === i ? 'opened' : '', selectMenu2 === m.name ? 'selected' : '']" v-for="(m, i) in menus" :key="i" @mouseover="selectMenu(i)" @mouseleave="selectMenu(-1)" @click="changeView(m, undefined)">
        <span class="m_title">{{ m.meta.title }}</span>
        <ul class="m_sub" v-if="m.children?.length">
          <li class="ms_title" v-for="(ms, j) in m. children" :key="j" @click.stop="changeView(ms, m)">
            <span class="m_title">{{ ms.meta.title }}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="bc_view">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { RouteRecordRaw } from 'vue-router'

interface Props {
  menus: RouteRecordRaw[],
  currentMenu2: RouteRecordRaw
}

const props = withDefaults(defineProps<Props>(), {
  menus: () => [],
  currentMenu2: void 0
})

const { menus, currentMenu2 } = toRefs(props)

let selectIndex = ref(-1)
let selectMenu2 = ref<string>()

watch(() => currentMenu2.value, (n, o) => {
  selectMenu2.value = n?.name?.toString() || menus.value[0]?.name?.toString()
}, { immediate: true })

const selectMenu = (index: number) => {
  selectIndex.value = index
}

const emits = defineEmits<{ ( e: 'selectSubMenu', menu: RouteRecordRaw, parent: RouteRecordRaw | undefined): void }>()

const changeView = (menu: RouteRecordRaw, parent: RouteRecordRaw | undefined) => {
  selectIndex.value = -1
  if (parent) {
    selectMenu2.value = parent?.name?.toString()
  }
  if (!menu?.children?.length) emits('selectSubMenu', menu, parent)
}

onUpdated(() => {
  // TODO
})

</script>

<style lang="less" scoped>
.back_content {
  width: 100%;
  height: calc(100% - 60px);
  .bc_menu {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
    .bcm_item {
      height: 100%;
      cursor: pointer;
      font-size: 15px;
      border-radius: 2px;
      position: relative;
      .m_title {
        display: inline-block;
        width: fit-content;
        min-width: 84px;
        height: 50px;
        margin: 0 10px;
        text-align: center;
      }
      .m_sub {
        position: absolute;
        display: none;
        right: 0;
      }
    }
    .bcm_item:hover, .bcm_item.opened {
      .m_sub {
        display: flex;
        flex-flow: row nowrap;
      }
      .m_sub:nth-child(-n + 8) {
        left: 0;
        right: auto;
      }
    }
  }
  .bc_view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    min-height: 800px;
    padding: 10px 10px 0 10px;
  }
}
</style>
